import React, { useEffect, useState } from "react";
import { INews } from "@/types";
import Loading from "@/components/Loading";
import { useNavigate } from "react-router-dom";
type VirtalListProps = {
    data: INews[];
    className: string;
    onLoad: () => void;
};

let startIndex = 0;
let showCount = 6;
let paddingTop = 0;
const VirtalList: React.FC<VirtalListProps> = ({ data, className, onLoad }) => {
    const listRef = React.useRef<HTMLDivElement>(null);

    const loadingRef = React.useRef(null);

    const navigate = useNavigate();
    const jumpToNewsDetail = (news: INews) => {
        navigate("/detail/" + news.id, { state: { data: news } });
    };
    const handleScroll = ({ target }: { target: EventTarget }) => {
        // judgeIfNeedLoad(target as HTMLElement);
        const oUl = (target as HTMLElement).querySelector("ul") as HTMLElement;
        const { scrollTop, offsetHeight } = target as HTMLElement;
        if (oUl.offsetHeight <= scrollTop + offsetHeight) {
            if (startIndex + showCount < data.length) {
                startIndex += 1;
                paddingTop += oUl.children[0].clientHeight;
                oUl.style.paddingTop = paddingTop + "px";
                setUiData(data.slice(startIndex, startIndex + showCount));
            } else {
                judgeIfNeedLoad(target as HTMLElement);
            }
        } else if (scrollTop < paddingTop) {
            startIndex -= 1;
            // paddingTop += oUl.children[0].clientHeight;
            // oUl.style.paddingTop = paddingTop + "px";
            setUiData(data.slice(startIndex, startIndex + showCount));
        }
    };

    const [uiData, setUiData] = useState<INews[]>([]);
    useEffect(() => {
        if (startIndex === 0) {
            setUiData(data.slice(startIndex, startIndex + showCount));
        } else {
            const oUl = (listRef.current as HTMLElement).querySelector(
                "ul"
            ) as HTMLElement;
            startIndex += 1;
            paddingTop += oUl.children[0].clientHeight;
            oUl.style.paddingTop = paddingTop + "px";
            setUiData(data.slice(startIndex, startIndex + showCount));
        }
    }, [data]);
    // 判断是否需要加载数据
    const judgeIfNeedLoad = (target: HTMLElement) => {
        if (loadingRef.current) {
            const oUl = (target as HTMLElement).querySelector(
                "ul"
            ) as HTMLElement;
            if (
                oUl?.offsetHeight <=
                (target as HTMLElement).scrollTop +
                    (target as HTMLElement).offsetHeight
            ) {
                onLoad();
            }
        }
    };

    return (
        <div
            className={`mt-5 ${className}`}
            ref={listRef}
            onScroll={handleScroll}
        >
            <ul>
                {uiData.map((news: INews) => {
                    return (
                        <div
                            key={news.id}
                            className="m-3 mb-5 last:mb-0 flex justify-between border-b-[1px] border-gray-200 pb-3 last:border-b-0"
                            onClick={() => jumpToNewsDetail(news)}
                        >
                            <div>
                                <div className="text-lg font-bold">
                                    {news.title}
                                </div>
                                <div className="flex items-center text-sm text-gray-500 mt-2">
                                    {news.author}
                                    <span className="icon-[mdi--dot]"></span>
                                    {news.date}
                                </div>
                            </div>
                            <div className="w-[130px] h-[88px] shrink-0 rounded-xl overflow-hidden ml-2.5">
                                <img
                                    src={news.imageUrl}
                                    alt="news"
                                    className="w-full h-full object-cover"
                                />
                            </div>
                        </div>
                    );
                })}
            </ul>
            <Loading ref={loadingRef} />
        </div>
    );
};

export default VirtalList;
